<template>
  <div>
    <div class="h_1">
      <Button type="primary" @click="insert_data_model=true">导入数据</Button>
      <Button type="primary" @click="edit_data_model=true">选择编辑</Button>
      <Button type="primary" @click="delete_data_model=true">选中删除</Button>
      <Button type="primary"  class="flash" @click="get_task_list">刷新</Button>
    </div>

    <Table border ref="back_data_selection" :columns="back_columns" :data="back_data"></Table>
    <div class="back_main_modal">
      <Modal
        title="导入数据"
        v-model="insert_data_model"
        class-name="insert_data_class"
        width="1250"
        :mask-closable = "false"
        @on-ok="insret_task()"
        >
        <div class="m_item">
          <div class="m_1">
            <div class="m_t">
              <span>选择服务</span>
            </div>
            <div class="m_i">
              <Select v-model="insert_data.server_name" style="width:100px">
                <Option v-for="item in serverList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </div>
          </div>
          <div class="m_2">
            <div class="m_t">
              <span>选择账号</span>
            </div>
            <div class="m_i">
              <Select v-model="insert_data.client_name" style="width:100px">
                <Option v-for="item in clientList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </div>
          </div>
          <div class="m_3">
            <div class="m_t">
              <span>选择合约</span>
            </div>
            <div class="m_i">
              <Select v-model="insert_data.contract" style="width:200px">
                <Option v-for="item in contractList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </div>
          </div>
          <div class="m_4">
            <div class="m_t">
              <span>初始权益</span>
            </div>
            <div class="m_i">
              <Input v-model="insert_data.first_margin"  style="width: 100px" />
            </div>
          </div>
          <div class="m_5">
            <div class="m_t">
              <span>添加任务</span>
            </div>
            <div class="m_i">
              <Input v-model="insert_data.task_name"  style="width: 200px" />
            </div>
          </div>
          <div class="m_6">
            <div class="m_t">
              <span>添加备注</span>
            </div>
            <div class="m_i">
              <Input v-model="insert_data.note"  style="width: 400px" />
            </div>
          </div>
        </div>
      </Modal>
      <Modal
        title="选择编辑"
        v-model="edit_data_model"
        class-name="edit_data_class"
        width="850"
        :mask-closable = "false"
        @on-ok="update_task()"
      >
        <div class="m_item">

          <div class="m_4">
            <div class="m_t">
              <span>初始权益</span>
            </div>
            <div class="m_i">
              <Input v-model="edit_data.first_margin"  style="width: 100px" />
            </div>
          </div>
          <div class="m_5">
            <div class="m_t">
              <span>任务名</span>
            </div>
            <div class="m_i">
              <Input v-model="edit_data.task_name"  style="width: 200px" />
            </div>
          </div>
          <div class="m_6">
            <div class="m_t">
              <span>添加备注</span>
            </div>
            <div class="m_i">
              <Input v-model="edit_data.note"  style="width: 400px" />
            </div>
          </div>
        </div>
      </Modal>
      <Modal
        title="选择删除"
        v-model="delete_data_model"
        class-name="delete_data_class"
        :mask-closable = "false"
        @on-ok="delete_task()"
        width="450"
      >
        <p>确定要删除吗？</p>
      </Modal>
      <Modal
        fullscreen
        title="量化交易（导入数据时的状态）"
        footer-hide="false"
        v-model="trade_page"
        :mask-closable = "false"
        class-name="trade_page dark"
      >
        <Trade v-if="trade_page"></Trade>
      </Modal>
      <Modal
        fullscreen
        title="运行日志（导入数据时的状态）"
        footer-hide="false"
        v-model="trade_log"
        class-name="trade_page dark"
        :mask-closable = "false"
      >
        <DataLog v-if="trade_log"></DataLog>
      </Modal>
    </div>
  </div>
</template>

<script>
import Trade from "../trade/trade";
import DataLog from "../data-log/data-log";
import {
  TimeToDate,
} from '@/libs/tools'
import {
  getServerConfig,
  getTaskList,
  updateTask,
  deleteTask,
  insretTask,
} from '@/api/trade'
import { mapMutations} from 'vuex'
export default {
  name: "back_main",
  components: {DataLog, Trade},
  data(){
    return{
      back_columns:[
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          key: 'id',
          width: 80,
          align:'center',
        },
        {
          title: '任务名',
          key: 'task_name',
          align:'center',
          width: 150
        },
        {
          title: '合约',
          key: 'contract',
          align:'center',
          width: 130
        },
        {
          title: '开始时间',
          key: 'start_time',
          align:'center',
          width: 180
        },
        {
          title: '结束时间',
          key: 'end_time',
          align:'center',
          width: 180
        },
        {
          title: '初始权益',
          key: 'first_margin',
          align:'center',
          width: 130
        },
        {
          title: '最终权益',
          key: 'last_margin',
          align:'center',
          width: 130
        },
        {
          title: '收益率',
          key: 'profit_rate',
          align:'center',
          width: 130
        },
        {
          title: '备注',
          key: 'note',
        },
        {
          title: '操作',
          key: 'action',
          align:'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'default'
                },
                style: {
                  marginRight: '10px'
                },
                on:{
                  click:() =>{
                    this.trade_page =true
                    this.set_contract(params.row.contract)
                    this.set_client(params.row.id)
                  }
                }
              }, '查看详情'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'default'
                },
                style: {
                  marginRight: '10px'
                },
                on:{
                  click:() =>{
                    this.trade_log =true
                    this.set_contract(params.row.contract)
                    this.set_client(params.row.id)
                  }
                }
              }, '查看日志'),
            ]);
          }
        }
      ],
      back_data:[],
      insert_data_model:false,
      serverList:[],
      clientList:[],
      contractList:[],
      insert_data:{
        server_name:'',
        client_name:'',
        contract:'',
        first_margin:'',
        task_name:'',
        note:'',
      },
      edit_data_model:false,
      edit_data:{
        first_margin:'',
        task_name:'',
        note:'',
      },
      delete_data_model:false,
      trade_page:false,
      trade_log:false,

    }
  },
  methods:{
    ...mapMutations([
      'set_contract',
      'set_client',
    ]),
    get_server_config(){
      let params ={
      };
      getServerConfig(params).then(res=>{
        if(res.data.status === 'ok'){
          this.clientList = res.data.data.client_list.map(function (item) {return {value:item,label:item}});
          this.contractList = res.data.data.contract_list.map(function (item) {return {value:item,label:item}});
          this.serverList = res.data.data.server_list.map(function (item) {return {value:item,label:item}});
          this.$Message.success(res.data.msg);
        }else{
          this.$Message.error(res.data.msg);
        }
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
        })
    },
    get_task_list(){
      let params ={
      };
      getTaskList(params).then(res=>{
        if(res.data.status === 'ok'){
          this.back_data = res.data.data.map((item)=>{
            item.end_time = TimeToDate(item.end_time, 'year')
            item.start_time = TimeToDate(item.start_time, 'year')
            return item
          })
          this.$Message.success(res.data.msg);
        }else{
          this.$Message.error(res.data.msg);
        }
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
        })
    },
    update_task(){
      let selectItems = [];
      selectItems = this.$refs.back_data_selection.getSelection();
      var id_list = selectItems.map(function (item) {return item.id});
      let params ={
        first_margin:this.edit_data.first_margin,
        task_name:this.edit_data.task_name,
        note:this.edit_data.note,
        id:JSON.stringify(id_list),
      };
      updateTask(params).then(res=>{
        if(res.data.status === 'ok'){
          this.$Message.success(res.data.msg);
        }else{
          this.$Message.error(res.data.msg);
        }
        this.edit_data = {
            first_margin:'',
            task_name:'',
            note:'',
          };
        this.get_task_list()
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
          this.edit_data = {
            first_margin:'',
            task_name:'',
            note:'',
          };
        })
    },
    delete_task(){
      let selectItems = [];
      selectItems = this.$refs.back_data_selection.getSelection();
      var id_list = selectItems.map(function (item) {return item.id});
      let params ={
        id:JSON.stringify(id_list),
      };
      deleteTask(params).then(res=>{
        if(res.data.status === 'ok'){
          this.$Message.success(res.data.msg);
        }else{
          this.$Message.error(res.data.msg);
        }
        this.get_task_list()
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
        })
    },
    insret_task(){
      let params ={
        server_name:this.insert_data.server_name,
        client_name	:this.insert_data.client_name,
        contract:this.insert_data.contract,
        first_margin:this.insert_data.first_margin,
        task_name:this.insert_data.task_name,
        note:this.insert_data.note,
      };
      insretTask(params).then(res=>{
        if(res.data.status === 'ok'){
          this.$Message.success(res.data.msg);
        }else{
          this.$Message.error(res.data.msg);
        }
        this.insert_data = {
            server_name:'',
            client_name:'',
            contract:'',
            first_margin:'',
            task_name:'',
            note:'',
        };
        this.get_task_list()
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
          this.insert_data = {
            server_name:'',
            client_name:'',
            contract:'',
            first_margin:'',
            task_name:'',
            note:'',
          };
        })
    },
  },
  created() {
    this.get_server_config()
    this.get_task_list()
  }
}
</script>

<style scoped lang="less">
.h_1{
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 5px;
  .flash{
    float:right;
    margin-right: 20px;
  }
}
.insert_data_class ,.edit_data_class{
  .m_item{
    display: flex;
    justify-content: flex-start;
    .m_1{
      width: 100px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
    .m_2{
      margin-left: 10px;
      width: 100px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
    .m_3{
      margin-left: 10px;
      width: 200px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
    .m_4{
      margin-left: 10px;
      width: 100px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
    .m_5{
      margin-left: 10px;
      width: 200px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
    .m_6{
      margin-left: 10px;
      width: 400px;
      .m_t{
        text-align: center;
        align-content: center;
      }
    }
  }

}
</style>
